<template>
	<view class="content">
		<view class="company_image"></view>
		<view class="contact">
			<view class="contact-card">
				<view class="icon">
					<image src="/static/icons/name.svg"></image>
				</view>
				<view class="text">
					<view><text>姓名:&nbsp;&nbsp;</text>{{ userName }}</view>
				</view>
			</view>
			<view class="contact-card">
				<view class="icon">
					<image src="/static/icons/id.svg"></image>
				</view>
				<view class="text">
					<view><text>员工ID:&nbsp;&nbsp;</text>{{ userId }}</view>
				</view>
			</view>
			<view class="contact-card">
				<view class="icon">
					<image src="/static/icons/nick_name.svg"></image>
				</view>
				<view class="text">
					<view><text>昵称:&nbsp;&nbsp;</text>{{ loginName }}</view>
				</view>
			</view>
			<view class="contact-card">
				<view class="icon">
					<image src="/static/icons/type.svg"></image>
				</view>
				<view class="text">
					<view><text>用户类型:&nbsp;&nbsp;</text>{{ userType }}</view>
				</view>
			</view>
			<view class="contact-card">
				<view class="icon">
					<image src="/static/icons/companyb.svg"></image>
				</view>
				<view class="text">
					<view><text>公司:&nbsp;&nbsp;</text>{{ organizationName || '大连施奈莱克创新汽车零部件有限公司' }}</view>
				</view>
			</view>
		</view>
		<web-view src="https://uniapp.dcloud.net.cn/component/web-view.html" allow></web-view>
	</view>
</template>

<script lang="ts" setup>
import { useUserStore } from '@/stores/useUserStore';
const { userName, userType, userId, loginName, organizationName } = useUserStore().userInfo;
</script>

<style lang="scss" scoped>
uni-page-body {
	height: 100%;
}

.content {
	width: 100%;
	height: 100%;

	.contact {
		padding: $uni-page-padding;
		padding-top: 15px;
		padding-bottom: 15px;
	}

	.contact-card {
		display: flex;
		align-items: flex-start;
		margin-bottom: 10px;
		padding: 0 5px;

		.icon {
			margin-right: 15px;
			width: 40px;
			height: 40px;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				background-color: #ecf5ff;
				padding: 7px;
				border-radius: 5px;
				width: 22px;
				height: 22px;
			}
		}

		.text {
			flex-basis: calc(100% - 55px);
			align-self: center;
			border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
			padding: 4px 0;

			view:nth-child(1) {
				font-size: 15px;
				font-weight: 300;
				line-height: 24px;
				color: #666;

				text {
					color: #000;
				}
			}
		}
	}

	.company_image {
		width: 100%;
		height: 230rpx;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		background-image: url(/static/image/personal/company.png);
	}
}
</style>
